<template lang="pug">
  DataTablePage(
    ref="table"
    pid="parentId"
    cid="id"
    mainColumn="name"
    longColumn="name"
    title="菜单管理"
    label="菜单"
    labelName="name"
    resource="/dxbase/rbac/menu"
    :isTree="true"
    :operation="operation"
    :operationWidth="150"
    :tableFullList="tableFullList"
    :tableInitList="tableInitList"
    :filterFullList="filterFullList"
    :filterInitList="filterInitList"
    :orderByInit="orderByInit"
    :createList="createList"
    :updateList="updateList"
    :updateButtonList="updateButtonList"
    :createFormValues="createFormValues"
    :columns="columns")
</template>

<script>
import { cloneDeep } from 'lodash'
import DataTablePage from '@/containers/DataTablePage'
import { operationCreate, operationUpdate, operationDelete } from '@/containers/DataTablePage/operation'
import { checkActions } from '@/utils/auth'
import config from '../config/menu'

export default {
  name: 'SystemMenu',
  components: {
    DataTablePage
  },
  mounted () {
    this.updateButtonList = [{
      name: 'submit',
      label: '提交',
      type: 'complete',
      validate: true,
      funcProps: {
        table: this.$refs.table
      },
      func ({funcProps}) {
        const { form, button, table } = funcProps
        const data = cloneDeep(form.formValues)
        delete data.children
        delete data.parent
        table.$patch({
          url: `${table.resource}/${data.id}`,
          data
        }).then(data => {
          console.log(data)
          button.loading = false
          if (data) {
            table.getData()
            table.dialogVisible = false
          }
        })
      } /* 编辑表单的提交事件 */
    }]
  },
  data () {
    const hasUpdate = checkActions('/system/#/menu/update')
    const hasCreate = checkActions('/system/#/menu/create')
    const hasDelete = checkActions('/system/#/menu/delete')
    return {
      ...config,
      operation: [{
        ...operationCreate,
        isShow () {
          return hasCreate
        }
      }, {
        ...operationUpdate,
        isShow () {
          return hasUpdate
        }
      }, {
        ...operationDelete,
        isShow () {
          return hasDelete
        }
      }],
      updateButtonList: [],
      tableInitList: ['name', 'menuTypeName', 'enName', 'url', 'icon', 'sort', 'enabled', 'remark'],
      tableFullList: ['name', 'menuTypeName', 'enName', 'url', 'icon', 'sort', 'enabled', 'remark'],
      filterInitList: ['name', 'enabled', 'menuTypeId', 'url'],
      filterFullList: ['name', 'enabled', 'menuTypeId', 'url'],
      createList: ['name', 'enName', 'menuTypeId', 'url', 'icon', 'sort', 'enabled', 'color', 'actionIds', 'remark'],
      updateList: ['name', 'enName', 'menuTypeId', 'url', 'icon', 'sort', 'enabled', 'color', 'actionIds', 'remark'],
      orderByInit: [{
        name: 'sort',
        sort: 'asc'
      }],
      createFormValues: {
        parentId: '',
        name: '',
        menuTypeId: '',
        url: '',
        icon: '',
        enabled: 1,
        sort: 0,
        remark: ''
      }
      // columns: {
      //   name: {
      //     label: '菜单名称',
      //     filter: {
      //       type: 'input',
      //       like: true
      //     },
      //     form: {
      //       type: 'input',
      //       rules: [{
      //         type: 'required',
      //         message: '请输入菜单名称'
      //       }, {
      //         type: 'maxLength',
      //         value: 30,
      //         message: '长度不能大于30'
      //       }]
      //     }
      //   },
      //   actionIds: {
      //     label: '接口权限',
      //     render: {
      //       type: 'multiselect'
      //     },
      //     relation: 'actions',
      //     form: {
      //       type: 'tree'
      //     }
      //   },
      //   menuTypeId: {
      //     label: '菜单类型',
      //     relation: 'menuType',
      //     filter: {
      //       type: 'select',
      //       width: 100
      //     },
      //     form: {
      //       type: 'select',
      //       rules: [{
      //         type: 'required',
      //         message: '请输入菜单类型'
      //       }]
      //     }
      //   },
      //   menuTypeName: {
      //     label: '菜单类型',
      //     width: 98,
      //     filter: {
      //       type: 'input',
      //       like: true
      //     }
      //   },
      //   url: {
      //     label: '菜单路径',
      //     filter: {
      //       type: 'input',
      //       like: true
      //     },
      //     form: {
      //       type: 'input',
      //       like: true
      //     }
      //   },
      //   icon: {
      //     label: '菜单图标',
      //     width: 100,
      //     form: {
      //       type: 'input'
      //     }
      //   },
      //   sort: {
      //     label: '排序',
      //     width: 70,
      //     form: {
      //       type: 'input',
      //       dataType: 'number'
      //     }
      //   },
      //   color: {
      //     label: '颜色',
      //     width: 70,
      //     form: {
      //       type: 'input'
      //     }
      //   },
      //   enabled: {
      //     label: '是否可见',
      //     width: 98,
      //     render: {
      //       type: 'select'
      //     },
      //     relation: 'yesOrNo',
      //     filter: {
      //       type: 'select',
      //       width: 100
      //     },
      //     form: {
      //       type: 'select',
      //       width: 120,
      //       rules: [{
      //         type: 'required',
      //         dataType: 'boolean',
      //         message: '请输入是否可见'
      //       }]
      //     }
      //   },
      //   remark: {
      //     label: '备注',
      //     width: 140,
      //     form: {
      //       type: 'input',
      //       isColumn: true,
      //       large: true,
      //       rules: [{
      //         type: 'maxLength',
      //         value: 120,
      //         message: '字数不能大于120个字'
      //       }]
      //     }
      //   }
      // }
    }
  }
}
</script>
